import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import {
    Row, Col, Card, Form, Input,
    Select, Radio, Button, Modal
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { Link } from 'dva/router';
import styles from './ProductCatalog.less';
import TextArea from 'antd/lib/input/TextArea';
import { message } from 'antd';
import product1 from '../../assets/product1.png';
import product3 from '../../assets/product3.png';
import DescriptionList from '../../components/DescriptionList';
import { solo } from '../../common/solo';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const { Description } = DescriptionList;
/*
  产品z展业
*/

@connect(({ product }) => ({
    product,
}))
@Form.create()
export default class ProductAcquisition extends PureComponent {
    state = {
        modalVisible: false,
        template: '',
        productValue: null,
    };

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'product/getProductDisplay',
            callback:()=>{
                const {product:{productDisplay}} = this.props;
                productDisplay&&
                this.setState({
                    productValue: productDisplay,
                    template: productDisplay.valid
                })
            }
        });
    }

    handleOpinionOK = () => {
        const { dispatch } = this.props;
        const { validateFieldsAndScroll } = this.props.form;
        validateFieldsAndScroll((error, values) => {
            if (!error) {
                dispatch({
                    type: 'product/createProductAcquisition',
                    payload: {
                        template: this.state.template,
                        ...values,
                    },
                    callback: () => {
                        const { product: { productResult } } = this.props;
                        if (productResult.code == "200") {
                            // dispatch(routerRedux.push(`/product/channel-maintenance`));
                            this.setState({
                                modalVisible: false
                            })
                            message.success("提交成功")
                        } else {
                            message.error(productResult.message)
                        }
                    }
                })
            }
        });
    }

    handleModalCancel = () => {
        this.setState({
            modalVisible: false
        })
    }

    handleEditTemplate = () => {
        const { dispatch } = this.props;

        if (this.state.template) {
            this.setState({
                modalVisible: true
            })
        } else {
            message.warning("请先选择模板")
        }
    }

    handleTemplateChange = (e) => {
        this.setState({
            template: e.target.value
        })
    }


    render() {
        const { product: { productLoading ,productDisplay} } = this.props;
        const { form } = this.props;
        const merchantId = sessionStorage.getItem("merchantId");

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 2 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
        };

        const formItemLayout1 = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 18 },
            },
        };

        return (
            <PageHeaderLayout title="产品展业">
            {/* {JSON.stringify(productDisplay)} */}
                <Card bordered={false}>
                    <Form>
                        <Row>
                            <Col span={18}>
                                <FormItem {...formItemLayout} label="选择模板" >
                                    <RadioGroup onChange={this.handleTemplateChange} value={this.state.template}>
                                        <Radio value={1}>模板一</Radio>
                                        <Radio value={2}>模板二</Radio>
                                    </RadioGroup>
                                </FormItem>
                            </Col>
                            <Col span={2}>
                                <Button type="primary" onClick={this.handleEditTemplate}>编辑模板</Button>
                            </Col>
                            <Col span={2} style={{marginLeft: '20px'}}>
                                <Button type="primary">
                                    <a
                                        href={`${solo.productShow}id=${merchantId}&type=${this.state.template}`}
                                        title="产品展业模板预览"
                                        target="_blank">
                                        预览
                                    </a>
                                </Button>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={10}>
                                <FormItem label="模板一">
                                    <img src={product1} style={{ width: '70%', height: '70%' }} />
                                </FormItem>
                            </Col>
                            <Col span={10}>
                                <FormItem label="模板二">
                                    <img src={product3} style={{ width: '70%', height: '70%' }} />
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>

                </Card>
                <Modal
                    title={`模板${this.state.template}编辑`}
                    keyboard={true}
                    visible={this.state.modalVisible}
                    onOk={this.handleOpinionOK}
                    loading={productLoading}
                    onCancel={this.handleModalCancel}
                >
                    <Form>
                        <FormItem {...formItemLayout1} label="大标题"
                            // hasFeedback
                        >
                            {form.getFieldDecorator('headlines', {
                                initialValue: this.state.productValue && this.state.productValue.headlines,
                                rules: [{
                                    message: '标题不能超过10个字',
                                    max: 10
                                }],
                            })(
                                <Input placeholder="请输入" id="validating" />
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout1} label="总体描述"  >
                            {form.getFieldDecorator('description', {
                                initialValue: this.state.productValue && this.state.productValue.description,
                                rules: [{
                                    message: '总描述不能超过20个字',
                                    max: 20
                                }],
                            })(
                                <TextArea rows={3} placeholder="请输入" max={20} />
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout1} label="标题1" >
                            {form.getFieldDecorator('titleOne', {
                                initialValue: this.state.productValue && this.state.productValue.titleOne,
                                rules: [{
                                    message: '标题不能超过10个字',
                                    max: 10
                                }],
                            })(
                                <Input placeholder="请输入" max={10} />
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout1} label="描述">
                            {form.getFieldDecorator('descOne', {
                                initialValue: this.state.productValue && this.state.productValue.descOne,
                                rules: [{
                                    message: '描述不能超过30个字',
                                    max: 30
                                }],
                            })(
                                <TextArea rows={3} placeholder="请输入" max={30} />
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout1} label="标题2" >
                            {form.getFieldDecorator('titleTwo', {
                                initialValue: this.state.productValue && this.state.productValue.titleTwo,
                                rules: [{
                                    message: '标题不能超过10个字',
                                    max: 10
                                }],
                            })(
                                <Input placeholder="请输入" max={10} />
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout1} label="描述">
                            {form.getFieldDecorator('descTwo', {
                                initialValue: this.state.productValue && this.state.productValue.descTwo,
                                rules: [{
                                    message: '描述不能超过30个字',
                                    max: 30
                                }],
                            })(
                                <TextArea rows={3} placeholder="请输入" max={30} />
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout1} label="标题3" >
                            {form.getFieldDecorator('titleThree', {
                                initialValue: this.state.productValue && this.state.productValue.titleThree,
                                rules: [{
                                    message: '标题不能超过10个字',
                                    max: 10
                                }],
                            })(
                                <Input placeholder="请输入" max={10} />
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout1} label="描述">
                            {form.getFieldDecorator('descThree', {
                                initialValue: this.state.productValue && this.state.productValue.descThree,
                                rules: [{
                                    message: '描述不能超过30个字',
                                    max: 30
                                }],
                            })(
                                <TextArea rows={3} placeholder="请输入" max={30} />
                            )}
                        </FormItem>
                    </Form>
                </Modal>
            </PageHeaderLayout>
        );
    }
}